<template>
	<view>
		<topTab @tabClick="tabClick"/>
		<view class="show-detail">
			<view class="left">
				<view class="img">
					<image :src="activeUrl" mode="" class="image"></image>
				</view>
				<view class="active-color">
					{{expenditureListIconList[activeIndex].text}}
				</view>
			</view>
			<view class="right">
				￥{{price?price:'0.00'}}
			</view>
		</view>
		<view class="class-list">
			<view class="wrap" v-for="(item,index) in expenditureListIconList" :key="index" @click="itemClick(index)">
				<view class="logo">
					<image :src="activeIndex == index?item.url1:item.url" mode="" class="image"  ></image>
				</view>
				<view class="text" :class="{'active-color':activeIndex == index}">
					{{item.text}}
				</view>
			</view>
		</view>
		<keyboard @input="numClick" @onDelete="onDelete" @onConfirm="onConfirm"/>
	</view>
</template>

<script>
	import topTab from '../../components/topTab.vue';
	import keyboard from '../../components/keyboard/keyboard.vue';
	export default {
		components:{
			topTab,
			keyboard
		},
		data() {
			return {
				currentTab:0,
				activeIndex:0,
				uni_id:'',
				price:'',
				isEdit:false,
				editParams:{},
				activeUrl:'/static/bookeepingIcon/eat1.png',
				expenditureListIconList: [{
						url: '/static/bookeepingIcon/eat.png',
						url1: '/static/bookeepingIcon/eat1.png',
						text: '吃饭',
						isSelected:false
					},
					{
						url: '/static/bookeepingIcon/play.png',
						url1: '/static/bookeepingIcon/play1.png',
						text: '老友聚餐',
						isSelected:false
					},
					{
						url: '/static/bookeepingIcon/clothes.png',
						url1: '/static/bookeepingIcon/clothes1.png',
						text: '衣服',
						isSelected:false
					},
					{
						url: '/static/bookeepingIcon/make_up.png',
						url1: '/static/bookeepingIcon/make_up1.png',
						text: '化妆品',
						isSelected:false
					},
					{
						url: '/static/bookeepingIcon/shop.png',
						url1: '/static/bookeepingIcon/shop1.png',
						text: '网购',
						isSelected:false
					},
					{
						url: '/static/bookeepingIcon/packet.png',
						url1: '/static/bookeepingIcon/packet1.png',
						text: '红包',
						isSelected:false
					},
					{
						url: '/static/bookeepingIcon/medical.png',
						url1: '/static/bookeepingIcon/medical1.png',
						text: '体检',
						isSelected:false
					},
					{
						url: '/static/bookeepingIcon/hydropower.png',
						url1: '/static/bookeepingIcon/hydropower1.png',
						text: '水电',
						isSelected:false
					},
				],
			}
		},
		onLoad() {
			uni.removeStorageSync('edit');
		},
		onHide() {
			uni.removeStorageSync('edit');
		},
		onShow() {
			// const token = uni.getStorageSync('uni_id_token');
			// if(!token) uni.redirectTo({
			// 	url:'pages/user/login'
			// })
			this.uni_id = uni.getStorageSync('userInfo')._id;
			this.editParams = uni.getStorageSync('edit') || {};
			this.isEdit = Object.keys(this.editParams).length ? true : false;
			if(this.isEdit){
				const { text,url ,price ,type }  = this.editParams;
				this.activeIndex = this.expenditureListIconList.findIndex(row => row.text == text);
				this.activeUrl = url;
				this.currentTab = type;
				this.price = price;
			}else{
				this.activeIndex = 0;
				this.activeUrl = '/static/bookeepingIcon/eat1.png';
				this.currentTab = 0;
				this.price = '';
			}
		},
		methods: {
			tabClick(index){
				this.currentTab = index
			},
			itemClick(index){
				this.activeIndex = index;
				this.activeUrl = this.expenditureListIconList[index].url1;
			},
			numClick(val){
				if(this.price.includes('.') && this.price.split('.')[1].length>1 ||(this.price.length==0 && val == '.')) return;
				let record = val.toString()
				this.price = this.price+record
			},
			onDelete(){
				if(!this.price.length) this.price = '';
				let record = this.price.split('');
				record.pop();
				this.price = record.join('')
			},
			onConfirm(){
				if(!this.price) return;
				uni.showLoading({
					title:'正在记录...'
				})
				let params = {
					uni_id:this.uni_id,
					price:this.price,
					type:this.currentTab,
					text:this.expenditureListIconList[this.activeIndex].text,
					url:this.expenditureListIconList[this.activeIndex].url1
				}
				this.isEdit && (params._id = this.editParams._id);
				uniCloud.callFunction({
					name:'record',
					data:{
						action: this.isEdit ? 'update' : 'record',
						params
					},
					success: (res) => {
						uni.hideLoading();
						this.price = '';
						uni.showToast({
							title:res.result.msg
						})	
					    if(this.isEdit) uni.removeStorageSync('edit');
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.class-list{
		display: flex;
		flex-wrap: wrap;
		border-top: 1rpx solid #ccc;
	}
	.active-color{
		color: #1296DB;
	}
	.image {
		width: 50rpx;
		height: 50rpx;
	}
	.show-detail{
		display: flex;
		padding: 0 20rpx;
		box-sizing: border-box;
		align-items: center;
		margin: 20rpx 0;
		justify-content: space-between;
		.left{
			display: flex;
			align-items: center;
			.img{
				margin-right: 10rpx;
			}
		}
		
	}
.wrap{
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: center;
	width: 20%;
	margin-top: 60rpx;
	
	.active-color{
		color: #1296DB;
	}
}
</style>
